<template>
  <div class="ly-page">
    <ul class="ly-list-input">
      <li>
        <label class="ly-label">类型：</label>
        <el-radio class="ly-radio" v-model="banner.type" label="11">PC首页</el-radio>
        <el-radio class="ly-radio" v-model="banner.type" label="12">PC服务项目</el-radio>
        <el-radio class="ly-radio" v-model="banner.type" label="13">PC商学院</el-radio>
        <el-radio class="ly-radio" v-model="banner.type" label="14">PC新闻资讯</el-radio>
        <el-radio class="ly-radio" v-model="banner.type" label="15">PC联系我们</el-radio>
        <el-radio class="ly-radio" v-model="banner.type" label="1">小程序</el-radio>
      </li>
      <li>
        <label class="ly-label">图片：</label>
        <el-upload class="avatar-uploader" :action="action"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="banner.img" :src="banner.img" class="avatar">
          <img v-else :src="img" class="avatar">
        </el-upload>
      </li>
      <!--      <li>-->
      <!--        <label class="ly-label">链接：</label>-->
      <!--        <el-input class="ly-input ly-link" v-model="banner.link" size="small" placeholder="请输入链接"></el-input>-->
      <!--      </li>-->
    </ul>
    <div class="ly-btn-footer">
      <el-button @click="$router.back(-1)">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {bannerAdd} from "@/api/banner"
  import config from '@/config'

  export default {
    name: "addBanner",
    data() {
      return {
        banner: {
          type: '0',
          img: '',
        },
        img: require('../../assets/images/icon_img.png'),
        action: config.baseURL + '/upload/upload'
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.banner.img = res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('图片格式错误!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M;
      },
      submit() {
        let data = {}
        data = {
          bannerUrl: this.banner.img,
          bannerType: 0,
          appType: this.banner.type
        }
        if (this.banner.img) {
          bannerAdd(data).then(response => {
            console.log(response)
            let result = response.data
            if (result.code === '0000') {
              this.$message.success(result.msg)
              this.banner.img = ''
              this.banner.type = '0'
            } else {
              this.$message.error(result.msg)
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>